<template>
  <div class="armors">
    <div class="loading" v-if="pageStat">
      <Loading></Loading>
    </div>
    <ul class="weaponList" v-if="!pageStat">
      <Title :titleName="this.$route.params.id"></Title>
      <div class="collapse">
        <li v-for="item in ArmorList" :key="item.id">
          <div class="weaponItem">
            <div class="right" @click="selectWeaponInfo(item.weaponId)" ref="selectWeaponInfo">
              <img :src="item.item__icon" alt="盔甲图片" class="weaponImg">
              <div class="weaponInfo">
                <span class="weaponName">{{item.item__name}}</span>
                <div class="weaponType">
                  <span>{{item.grade}} </span>
                  <span>{{item.occupation}} </span>
                  <span>{{item.position}}</span>
                </div>
              </div>
            </div>
            <div class="collapase_click" @click="selectCollapse(item.id)">

            </div>
          </div>
          <div class="collapse_item" v-if="activeNames===item.id">
            <table class="weapon_table">
              <thead>
                <tr>
                  <th>Power</th>
                  <th>Mobility</th>
                  <th>Resilience</th>
                  <th>Recovery</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td v-for="stat in item.stat" :key="stat">{{stat}}</td>
                </tr>
              </tbody>
            </table>

          </div>
        </li>
      </div>
    </ul>

  </div>
</template>

<script>
  import axios from 'axios'
  import Loading from '@/components/loading/Loading.vue'
  import Title from '@/components/title/Title.vue'


  export default {
    data() {
      return {
        pageStat: true,
        activeNames: -1,
        ArmorList: []
      }
    },
    components: {
      Loading,
      Title
    },
    created() {
      this.getArmorList(1)
    },
    updated() {},
    methods: {
      getArmorList(currentPage) {
        if (this.$route.params.id === "New Exotic Armor") {
          axios.get("/api/getNewExoticArmor", {
              params: {
                page: currentPage
              }
            })
            .then(res => {
              this.ArmorList = res.data
              this.$nextTick(() => {
                this.pageStat = false
              })

            })
            .catch(err => {
              console.error(err);
            })
        } else {
          axios.get("/api/getNewArmor", {
              params: {
                page: currentPage
              }
            })
            .then(res => {
              this.ArmorList = res.data
              this.$nextTick(() => {
                this.pageStat = false
              })

            })
            .catch(err => {
              console.error(err);
            })
        }

      },
      selectCollapse(id) {
        if (this.activeNames === id) {
          this.activeNames = -1
        } else {
          this.activeNames = id
        }

      },
      selectWeaponInfo(weaponId) {
        this.$store.commit('changeArmorCurrentPage', this.currentPage)
        var id = weaponId
        this.$router.push({
          name: "ArmorInfo",
          params: {
            id
          },
        });
      },
      back() {
        this.$router.go(-1)
      }
    }

  }
</script>

<style scoped>
  .title {
    display: flex;
    align-items: center;
    border-bottom: 1px #ccc solid;
    padding: 5px 0;
  }

  .title_info {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin-left: -50px;

  }

  .title_icon {
    width: 50px;
    height: 50px;
  }

  .back {
    width: 40px;
    height: 40px;
    padding-left: 5px;
  }

  .title_name {
    font-size: 25px;
    font-weight: bold;
  }

  .right {
    display: flex;
    flex: 1;
  }

  .armors {
    height: 100%;
  }


  .loading {

    height: 812px;
    overflow: hidden;
  }

  .weaponList {
    background: #1F1F1F;

  }

  .weaponItem {
    display: flex;
    /* background: #1F1F1F; */
    border-bottom: 1px solid #ccc;

  }

  .weaponImg {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    margin: 10px;
  }

  .weaponInfo {
    color: white;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }

  .weaponName {
    font-size: 20px;
    font-weight: bold;
  }

  .weaponType {
    display: flex;
    font-size: 12px;
    margin-top: 5px;
  }

  .attribute {
    display: flex;
    align-items: center;
  }

  .attribute>img {
    width: 13px;
    height: 13px;
  }

  .weaponType>:not(:last-child):after {
    content: " | ";
    color: var(--text-color-muted);
    opacity: .5;
  }

  .collapse_item {
    width: 100%;
    text-align: center;
    color: white;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
  }

  .weapon_table {
    background: rgb(49, 48, 48);
    width: 100%;
    padding: 5px 7px;

  }


  .collapase_click {
    width: 20px;
    height: 20px;
    margin: 25px 20px;
    background: #ccc;

  }
</style>